<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<!-- 父组件模板 -->
<div id="app">

  <cpn v-on:itemclick="cpnClick" @addclick="changeTotal" @cutclick="changeTotal" :pcounter="counter"></cpn>

  <h2>当前数值为: {{counter}}</h2>

</div>


<!-- 子组件模板 -->
<template id="cpn">
  <!-- 模板中确切的需要包含一个根标签将内部包起来 -->
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{item.name}}
    </button>
    
    <br>
    
    <button @click="increase()">+</button>
    <button @click="reduce()">-</button>
    
    
  </div>
</template>


<script src="../js/vue.js"></script>
<script>

  // 1, 子组件
  const cpn = {
    template : '#cpn',

    props: {
      pcounter : {
        type : Number,
        default : 0
      },
    },

    data() {
      return {
        categories : [
          {
            id : '1',
            name : '热门推荐'
          },
          {
            id : '2',
            name : '手机数码'
          },
          {
            id : '3',
            name : '家电器材'
          },
          {
            id : '4',
            name : '生活用品'
          }
        ],
        total : Number
      }
    },
    created () {
      this.total = this.pcounter;
    },
    methods: {
      // 按钮点击事件
      btnClick(item)
      {
        // console.log(item.id)
        // 事件发送 事件需要自定义 需要父组件进行监听 
        // $emit("发送事件名称", 传递数据)
        this.$emit('itemclick', item)
      },

      increase() {
        this.total++;
        // 给父组件发送信号 时父组件中计数变量加1
        this.$emit('addclick', this.total);
      },
      reduce() {
        this.total--;
        // 给父组件发送信号 时父组件中计数变量减1
        this.$emit('cutclick', this.total);
      }
    }
  };

  // 2. 父组件
  const app = new Vue({
    el : "#app",
    data : {
      counter : 2
    },
    components : {
      cpn
    },
    methods : {
      // 监听子组件的信号
      cpnClick(item) {
        console.log("Hello");
        console.log(item);
      },
    
      changeTotal(counter)
      {
        this.counter = counter;
      }
  
    }
  })

</script>
  
</body>
</html>